<template>
	<view class="pl30 pr30 pt30 pb160">
		<!-- 地址盒子 -->
		<view class="flex w-max row-center h100 bg-f radius16 col-center row-between pl30 pr30" v-if="!addDetail.id"  @click="gotoadd">
			<!-- <u-button type="info" size="medium">请选择地址</u-button> -->
			 <text>请选择地址</text>
			<u-icon name="arrow-right" size="26"></u-icon>
		</view>
		<view class="w-max bg-f radius16 pl30 pr30 pt30 pb30" v-else @click="$jump('/subpkg/myAdd/myAdd?form=2')">
			<view class="">
				<u-icon name="map" color='#F6B15D' size="30"></u-icon>
				<text class="fs24 ml20">{{addDetail.address}}</text>
			</view>
			<view class="mt24 mb24">
				<text class="fs26 fw">{{addDetail.addr}}</text>
				<u-icon name="arrow-right" size="26"></u-icon>
			</view>
			<view class="fs24">
				<text class="mr20">{{addDetail.name}}</text>
				<text>{{addDetail.phone}}</text>
			</view>
		</view>
		<!-- //地址盒子 -->

		<!-- 商品盒子 -->
		<view class="mt30 bg-f pl30 pr30 pt30 pb30 radius16" v-for="(item,i) in goodsList" :key='i'>
			<!-- 上面商品信息区域 -->
			<view class="flex goodsbox pb30">
				<!-- 左边的图片 -->
				<image
					:src="item.thumb_path"
					class="w160 h160 radius8"></image>
				<!-- 右边的商品信息 -->
				<view class="flex1 flex row-column row-between ml30">
					<view class="fs32 color3 fw">{{item.goods_name}}</view>
					<!-- <view class="fs24 color9">已选：金色</view> -->
					<view class="fs36 color-red">¥{{item.price}}</view>
				</view>
			</view>
			<!-- 下面的数量 -->
			<view class="flex row-between col-center mt40">
				<text>数量</text>
				<text>x {{item.num}}</text>
				<!-- <u-number-box v-model="value" @change="valChange" integer min=1></u-number-box> -->
			</view>
		</view>
		<!-- //商品盒子 -->

		<!-- 底部提交订单 -->
		<view class="flex row-right pt20 pb20 pr30 col-center bg-f footerOrder">
			<view class="">
				<text class="fs22 color9">共计{{goodsList.length}}件，</text>
				<text>合计：</text> <text class="color-red fw">¥{{total}}</text>
			</view>
			<view class="submitBtn ml30" @tap="buyBtn">
				提交订单
			</view>
		</view>
		<!-- //底部提交订单 -->

		<!-- 弹层提示 -->
		<u-popup v-model="show" mode="center" border-radius='16' width="100%" :custom-style='customStyle'>
			<!-- 弹层内部的盒子 -->
			<view class="popopBox">
				<view class="text-center fs28">温馨提示</view>
				<view class="popopBoxTxt mt30">
					请您通过线下方式与商家确认账号，数量，金额，发货，售后等相关事宜。本平台仅提供商品展示，无法提供售后及纠纷处理，若因此招受损失与本平台无关。
				</view>
				<view class="popopBoxBtn" @click="confirmBtn">
					我知道了
				</view>
			</view>
		</u-popup>
		<!-- //弹层提示 -->
	</view>
</template>

<script>
	export default {
		name:'submitOrder',
		onLoad() {
			this.List=uni.getStorageSync('selectList').data
			this.total=uni.getStorageSync('selectList').total
			if(uni.getStorageSync('selectList').defaultAddress) {
					this.addDetail=uni.getStorageSync('selectList').defaultAddress
			}
			this.init()
		},
		data() {
			return {
				//步进器
				value: 1,
				//弹层显示
				show:false,
				//弹层样式
				customStyle:{
					marginLeft:"70rpx",
					marginRight:"70rpx",
				},
				//总列表
				List:[],
				//商品列表
				goodsList:[],
				//总价
				total:'',
				//地址详情
				addDetail:{},
				//提交订单请求数据
				query:{},
				//店铺id
				shop_id:''
			};
		},
		methods: {
			//初始化
			init() {
			this.List.forEach(item=>{
					// console.log(item.goods)
					this.goodsList.push(...item.goods_info)
				})
			console.log(this.goodsList)
			this.shop_id=this.goodsList[0].shop_id
			
			},
			//步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			//前往选择地址
			gotoadd() {
				uni.$once('update',(item)=>{
						console.log(222,JSON.parse(item))
						this.addDetail=JSON.parse(item)
						console.log(111,this.addDetail)
				})
				uni.navigateTo({
					url:'/subpkg/myAdd/myAdd?form=2'
				})
			},
			//提价订单
			async buyBtn(){
				let sku_details=[]
				await this.goodsList.forEach(item=>{
					sku_details.push({
						goods_item_id:item.goods_item_id,
						note:'',
						num:item.num,
						shop_id:item.shop_id
					})
				})
					this.query.address_id=this.addDetail.id,
					this.query.sku_details=sku_details
				console.log(this.query)
				this.show=true
			},
			//弹层确认下单
			confirmBtn () {
				this.show=false
				this.$api.confirm_order(this.query).then(res=>{
					console.log('confirm_order',res)
					this.$msg(res.msg)
					uni.setStorageSync('orderInfo',res.data)
					setTimeout(()=>{
						uni.navigateTo({
							url:'/subpkg/orderPay/orderPay?shop_id='+this.shop_id
						})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss">
	.goodsbox {
		border-bottom: 2rpx solid #F5F5F5;
	}

	.footerOrder {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;

		.submitBtn {
			width: 260rpx;
			height: 80rpx;
			background: #D23030;
			box-shadow: 0px 2rpx 10rpx 0px rgba(210, 48, 48, 1);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

	}
	.popopBox {
		margin: 30rpx;
		.popopBoxTxt {
			background: #F5F5F5;
			border-radius: 16rpx;
			padding:20rpx;
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}
		.popopBoxBtn {
			margin-top: 30rpx;
			width: 100%;
			height: 80rpx;
			background: #D23030;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
